
import React from "react";
import { Select, Button, DatePicker, Input, Tooltip } from 'antd';
import { apiEventLocatorOverview } from '@/request/storageManager/outPut.js'
import './style/style.less'
import '@/font/iconfont.css'
import moment from 'moment';
import Card from "@/views/dataBoard/components/card.jsx"
import OnlineIncome from '@/views/dataBoard/components/theCrowdSummary.jsx'
import _ from 'lodash'
import TheNumberOfStatistics from "./components/theNumberOfStatisticsE"
import { transNumber } from "@/utils/numberTrans";

class Locator extends React.Component {
    state = {
        monthFlag: false,
        dataSource: [],
        defaultValueTime: null,
        dateType: "day",
        selectVal: "all",
        beginTime: moment().subtract(1, 'days').format('yyyy-MM-DD'),
        endTime: moment().subtract(1, 'days').format('yyyy-MM-DD'),
        time: '',
        showArr: [],
        showThe: [],
        chartData: {
            eventTrendList: [],
            dateList: []
        }
    }
    charts = React.createRef()
    async componentDidMount() {
        await this.getData();
        this.setState({
            time: moment().subtract(1, 'days').format('yyyy-MM-DD'),
        })
    }

    getData = async () => {
        // let res = await apiGetEventStatisticsOverview({ "dateType": this.state.dateType, "businessType": this.state.selectVal, "beginDate": this.state.beginTime, "endDate": this.state.endTime })
        let UnitDispose = (data) => {
            if (!!data) {
                if (data > 1000000) {
                    return data > 1000000 ? (data / 1000000).toFixed(2) + "百万" : data
                } else {
                    return (data > 10000 ? (data / 10000).toFixed(2) + "万" : data || 0)
                }
            } else {
                return 0
            }
        };
        const { dateType, beginTime, endTime } = this.state
        let res = await apiEventLocatorOverview({
            dateType, beginDate: beginTime, endDate: endTime
        })
        if (res.code === 0) {
            let data = res.data ? res.data : {}
            let dataSource = [];
            dataSource = [
                {
                    top:
                    {
                        title: '平均充值时长(秒）',
                        value: data.buyStayDuration ? UnitDispose(transNumber(data.buyStayDuration / 60, 2)) : 0,
                        explain: "",
                        yesterdayShow: true
                    },
                },
            ]
            this.setState({ dataSource })
            this.setTheChart(data)
        }
    }
    setData(value){
        
    }
    setTheChart = (data) => {
        // 横轴就是指标，日人均停留时长、日均pv、人均笔单、客单价、复购率
        let chartData = {
            buy: [],
            unBuy: []
        }

        if (Object.getOwnPropertyNames(data).length > 0) {
            chartData = {
                buy: [transNumber(data.buyStayDuration / 60, 2), data.buyVisitCount, data.buyPayCount, transNumber(data.buyPaySinglePrice / 100, 2), (Number(data.buyRepurchaseRate) * 100).toFixed(2)],
                unBuy: [transNumber(data.stayDuration / 60, 2), data.visitCount, data.payCount, transNumber(data.paySinglePrice / 100, 2), (Number(data.repurchaseRate) * 100).toFixed(2)]
            }
        }
        // let showArr = ["购买用户复购率（按月统计）", "非购买用户复购率（按月统计）"]
        let showThe = ["日人均停留时长", "日均pv", "人均笔单", "客单价"]
        // if (this.state.monthFlag) {
        //     showArr = []
        //     showThe.push("复购率")
        // }
        this.setState({ chartData, showThe })
    }
    onChange = (dates, dateStrings, type) => {
        if (dates) {
            let beginTime = "";
            let endTime = ""
            let time = ""
            if (type == "year") {
                beginTime = moment(dates).startOf('year').format('YYYY-MM-DD')
                endTime = moment(dates).endOf('year').format('YYYY-MM-DD')
                time = beginTime + '~' + endTime
            }
            if (type == "month") {
                beginTime = moment(dates).startOf('month').format('YYYY-MM-DD')
                endTime = moment(dates).endOf('month').format('YYYY-MM-DD')
                time = beginTime + '~' + endTime
            }
            if (type == "week") {
                beginTime = moment(dates).startOf('week').format('YYYY-MM-DD')
                endTime = moment(dates).endOf('week').format('YYYY-MM-DD')
                time = beginTime + '~' + endTime
            }
            if (type == "day") {
                beginTime = dateStrings
                endTime = dateStrings
                time = beginTime
            }
            if (type == "maybe") {
                beginTime = dateStrings[0]
                endTime = dateStrings[1]
                time = beginTime + "~" + endTime
            }

            this.setState({
                beginTime: beginTime,
                endTime: endTime,
                monthFlag: type == "month",
                dateType: type == "maybe" ? "day" : type,
                time: time
            }, () => {
                this.getData();
                // this.getChartData()
            })
        } else {
        }
    };
    open = (a) => {
        this.setState({
            defaultValueTime: null
        })
    }
    render() {
        const { showThe, dataSource, time, chartData, defaultValueTime, showArr } = this.state
        const leftJSx = <div className="card-box" >
            {
                dataSource.map((v, i) => {
                    return <Card key={i} top={v.top} showArr={showArr} />
                })
            }
        </div>
        return <div className={"p-layout-box configuration"}>

            <TheNumberOfStatistics leftSlot={ leftJSx} />
        </div>
    }
}

export default Locator;
